<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 插值语法：渲染动态数据 -->
      <p>{{ text }}</p>
      <!-- 
        指令语法:
          v-bind
            单向数据绑定（给标签属性绑定动态数据）
            v-bind:属性名="JS表达式" -> :属性名="JS表达式"
          v-model
            双向数据绑定（收集表单数据）
            v-model="JS表达式"
          v-on
            绑定DOM事件
            v-on:事件名.事件修饰符="回调函数" -> @事件名.事件修饰符="回调函数"
          v-if / v-else-if / v-else
            条件渲染（显示&隐藏）
            v-if="JS表达式"
          v-show
            条件渲染（显示&隐藏）
            v-show="JS表达式"
          v-for
            列表渲染（遍历展示数据）
            v-for="(item, index) in 遍历的数据" :key="item.id"
      -->
      <ul>
        <li v-for="(item, index) in text" :key="index">
          {{ item }} - {{ index }}
        </li>
      </ul>

      <ul>
        <li v-for="(item, index) in num" :key="index">
          {{ item }} - {{ index }}
        </li>
      </ul>

      <ul>
        <li v-for="(value, key) in person" :key="key">
          {{ value }} - {{ key }}
        </li>
      </ul>
    </div>
    <script src="./js/vue.js"></script>
    <script>
      const vm = new Vue({
        // 配置对象
        // 用来定义数据（非函数数据）
        data: {
          text: "hello",
          num: 10, // 不能是负数
          person: {
            name: "jack",
            age: 18,
          },
        },
        // 用来定义函数数据
        methods: {},
        // 监视属性：监视数据的变化，一旦发生变化就会执行函数
        watch: {},
        // 计算属性：一旦依赖的数据发生变化，就会重新计算
        computed: {},
      });
      vm.$mount("#app");
    </script>
  </body>
</html>
